<template>
    <PageWrapper title="管理员列表">
        <div class="content p-4">
            <BasicTable @register="registerTable">
                <template #avatar="{ text }">
                    <Avatar v-if="text" :src="text"></Avatar>
                    <Avatar v-else>
                        <UserOutlined />
                    </Avatar>
                </template>
                <!-- 状态 -->
                <template #status="{ text }">
                    <Tag v-if="text !== 1" color="#2db7f5">正常</Tag>
                    <Tag v-else color="#f50">禁用</Tag>
                </template>
            </BasicTable>
            <!-- 编辑弹窗 -->
            <EditModal
                :selectItem="selectItem.item"
                @register="registerEditModal"
                @updateData="updateTable"
            ></EditModal>
        </div>
    </PageWrapper>
</template>

<script lang="ts">
    import { defineComponent, reactive } from 'vue'
    import { PageWrapper } from '/@/components/Page'
    import { BasicTable, useTable, TableImg, TableAction } from '/@/components/Table'
    import { Columns, FormConfig } from './model'
    import { dataListApi } from '/@/api/user/admin/index'
    import { DataListParams, DataItem } from '/@/api/user/admin/model'
    import { Avatar, Tag } from 'ant-design-vue'
    import { UserOutlined } from '@ant-design/icons-vue'
    import EditModal from './components/edit.vue'
    import { useModal } from '/@/components/Modal'

    export default defineComponent({
        name: 'TenantList',
        components: {
            PageWrapper,
            EditModal,
            BasicTable,
            Avatar,
            UserOutlined,
            TableImg,
            Tag,
            TableAction,
        },
        setup() {
            // 表格
            const [registerTable, { reload }] = useTable({
                title: '管理员',
                titleHelpMessage: '展示管理员列表',
                canResize: true,
                bordered: true,
                rowKey: '_id',
                showTableSetting: true,
                columns: Columns,
                useSearchForm: true,
                formConfig: FormConfig as any,
                actionColumn: {
                    title: '操作',
                    dataIndex: 'action',
                    fixed: 'left',
                    width: 100,
                    slots: { customRender: 'action' },
                },
                api: async (data) => {
                    const res = await dataListApi(data)
                    return {
                        items: res.list,
                        total: res.count,
                    }
                },
                beforeFetch: (pageData) => {
                    console.log('页面数据', pageData)
                    const data: DataListParams = {
                        name: pageData.name ? pageData.name : '',
                        limit: pageData.pageSize,
                        page: pageData.current,
                    }
                    return data
                },
            })

            // 编辑弹窗 props
            const selectItem = reactive<{ item: DataItem | null }>({
                item: null,
            })
            // 编辑弹窗
            const [registerEditModal, { openModal: openEditModal }] = useModal()
            const editModalClick = (record: DataItem) => {
                selectItem.item = record
                openEditModal()
            }
            // 更新表格
            const updateTable = () => {
                reload()
            }

            return {
                registerTable,
                registerEditModal,
                editModalClick,
                selectItem,
                updateTable,
            }
        },
    })
</script>

<style lang="less">
    .vben-basic-table-img.check-img {
        height: 46px !important;
        align-content: center;
        justify-content: center;

        .ant-image {
            margin: auto;

            .ant-image-img {
                width: 40px;
                height: 40px;
                object-fit: cover;
            }
        }
    }

    .unsend {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 46px;
    }
</style>
